@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义hover类，替代hover:bg-primary/90 */
@layer utilities {
  .hover-primary {
    @apply hover:bg-primary-hover;
  }
}

@layer base {
  /* 亮色主题变量 */
  :root {
    /* 基础颜色 - 使用Zinc/Slate中性色系 */
    --background: 0 0% 100%; /* 页面背景色 (白色) */
    --foreground: 240 10% 3.9%; /* 页面前景色/主要文字颜色 (深灰色) */
    
    /* 卡片颜色 */
    --card: 0 0% 100%; /* 卡片背景色 (白色) */
    --card-foreground: 240 10% 3.9%; /* 卡片文字颜色 (深灰色) */
    
    /* 弹出层颜色 */
    --popover: 0 0% 100%; /* 弹出层背景色 (白色) */
    --popover-foreground: 240 10% 3.9%; /* 弹出层文字颜色 (深灰色) */
    
    /* 主要颜色 (用于按钮、链接等) - 使用更饱和的靛蓝色 */
    --primary: 225 73% 45%; /* 主要颜色 (靛蓝色) */
    --primary-hover: 225 73% 35%; /* 主要颜色的悬停状态 (深靛蓝色) */
    --primary-foreground: 210 40% 98%; /* 主要颜色上的文字颜色 (白色) */
    
    /* 次要颜色 (用于次要按钮、背景等) */
    --secondary: 220 14% 96%; /* 次要颜色 (浅灰色 - Zinc 100) */
    --secondary-foreground: 215 25% 27%; /* 次要颜色上的文字颜色 (深蓝灰色) */
    
    /* 静音/柔和颜色 (用于辅助文本或背景) */
    --muted: 220 14% 96%; /* 柔和颜色 (浅灰色 - Zinc 100) */
    --muted-foreground: 215 16% 47%; /* 柔和颜色上的文字颜色 (中灰色) */
    
    /* 强调色 (用于突出显示元素) */
    --accent: 220 14% 96%; /* 强调色 (浅灰色 - Zinc 100) */
    --accent-foreground: 215 25% 27%; /* 强调色上的文字颜色 (深蓝灰色) */
    
    /* 破坏性操作颜色 (如删除按钮) */
    --destructive: 0 84.2% 60.2%; /* 危险操作颜色 (红色) */
    --destructive-foreground: 0 0% 98%; /* 危险操作颜色上的文字颜色 (接近白色) */
    
    /* UI元素颜色 */
    --border: 240 5.9% 90%; /* 边框颜色 (浅灰色) */
    --input: 240 5.9% 90%; /* 输入框边框颜色 (浅灰色) */
    --ring: 240 5.9% 10%; /* 焦点环颜色 (深灰色) */
    
    /* 全局样式 */
    --radius: 0.5rem; /* 全局圆角大小 */

    /* --- 标签系统颜色 (亮色主题) --- */
    /* 严重程度标签 */
    --tag-critical-bg: 0 84.2% 60.2%;   /* 严重 - 背景 (红色) */
    --tag-critical-text: 0 0% 98%;      /* 严重 - 文字 (接近白色) */
    --tag-high-bg: 0 72% 51%;           /* 高 - 背景 (橙色) */
    --tag-high-text: 0 0% 100%;         /* 高 - 文字 (白色) */
    --tag-medium-bg: 31 100% 65%;      /* 中 - 背景 (黄色) */
    --tag-medium-text: 0 0% 100%;        /* 中 - 文字 (白色) */
    --tag-low-bg: 240 4.8% 95.9%;       /* 低 - 背景 (浅灰色) */
    --tag-low-text: 240 5.9% 10%;       /* 低 - 文字 (深灰色) */

    /* 状态标签 */
    --tag-active-bg: 162 73% 40%;       /* 激活 - 背景 (绿色) */
    --tag-active-text: 0 0% 100%;       /* 激活 - 文字 (白色) */
    --tag-pending-bg: 227 96% 82%;      /* 待定 - 背景 (蓝色) */
    --tag-pending-text: 0 0% 100%;      /* 待定 - 文字 (白色) */
    --tag-resolved-bg: 142 69% 56%;     /* 已解决 - 背景 (青色) */
    --tag-resolved-text: 0 0% 100%;     /* 已解决 - 文字 (白色) */
  }

  /* 暗色主题变量 */
  .dark {
    /* 基础颜色 - 使用Zinc/Slate中性色系 */
    --background: 215 28% 17%; /* 页面背景色 (深蓝灰色 - Slate 900) */
    --foreground: 210 40% 98%; /* 页面前景色/主要文字颜色 (接近白色) */

    /* 卡片颜色 */
    --card: 215 28% 17%; /* 卡片背景色 (深蓝灰色 - Slate 900) */
    --card-foreground: 210 40% 98%; /* 卡片文字颜色 (接近白色) */

    /* 弹出层颜色 */
    --popover: 215 28% 17%; /* 弹出层背景色 (深蓝灰色 - Slate 900) */
    --popover-foreground: 210 40% 98%; /* 弹出层文字颜色 (接近白色) */

    /* 主要颜色 */
    --primary: 225 73% 62%; /* 主要颜色 (亮靛蓝色) */
    --primary-hover: 225 73% 52%; /* 主要颜色的悬停状态 (较暗靛蓝色) */
    --primary-foreground: 215 32% 15%; /* 主要颜色上的文字颜色 (深蓝灰色) */

    /* 次要颜色 */
    --secondary: 215 27% 25%; /* 次要颜色 (深灰色 - Slate 800) */
    --secondary-foreground: 210 40% 98%; /* 次要颜色上的文字颜色 (接近白色) */

    /* 静音/柔和颜色 */
    --muted: 215 27% 25%; /* 柔和颜色 (深灰色 - Slate 800) */
    --muted-foreground: 215 20% 75%; /* 柔和颜色上的文字颜色 (浅灰色) */

    /* 强调色 */
    --accent: 215 27% 25%; /* 强调色 (深灰色 - Slate 800) */
    --accent-foreground: 210 40% 98%; /* 强调色上的文字颜色 (接近白色) */

    /* 破坏性操作颜色 */
    --destructive: 0 62.8% 30.6%; /* 危险操作颜色 (暗红色) */
    --destructive-foreground: 0 0% 98%; /* 危险操作颜色上的文字颜色 (接近白色) */

    /* UI元素颜色 */
    --border: 240 3.7% 15.9%; /* 边框颜色 (中灰色) */
    --input: 240 3.7% 15.9%; /* 输入框边框颜色 (中灰色) */
    --ring: 240 4.9% 83.9%; /* 焦点环颜色 (浅灰色) */

    /* --- 标签系统颜色 (暗色主题) --- */
    /* 严重程度标签 */
    --tag-critical-bg: 0 62.8% 30.6%;  /* 严重 - 背景 (暗红色) */
    --tag-critical-text: 0 0% 98%;     /* 严重 - 文字 (接近白色) */
    --tag-high-bg: 0 54% 45%;          /* 高 - 背景 (暗橙色) */
    --tag-high-text: 0 0% 98%;        /* 高 - 文字 (接近白色) */
    --tag-medium-bg: 31 81% 45%;       /* 中 - 背景 (暗黄色) */
    --tag-medium-text: 0 0% 98%;       /* 中 - 文字 (接近白色) */
    --tag-low-bg: 240 3.7% 15.9%;      /* 低 - 背景 (中灰色) */
    --tag-low-text: 0 0% 98%;          /* 低 - 文字 (接近白色) */

    /* 状态标签 */
    --tag-active-bg: 162 47% 30%;      /* 激活 - 背景 (暗绿色) */
    --tag-active-text: 0 0% 98%;      /* 激活 - 文字 (接近白色) */
    --tag-pending-bg: 227 57% 50%;     /* 待定 - 背景 (暗蓝色) */
    --tag-pending-text: 0 0% 98%;     /* 待定 - 文字 (接近白色) */
    --tag-resolved-bg: 142 47% 35%;    /* 已解决 - 背景 (暗青色) */
    --tag-resolved-text: 0 0% 98%;    /* 已解决 - 文字 (接近白色) */
  }
}

@layer base {
  /* 为所有元素设置默认边框颜色 */
  * {
    @apply border-border;
  }
  /* 设置body的默认背景和文字颜色 */
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  /* 基础标签样式: 定义了通用外观（内边距、字体、圆角等） */
  .tag-base {
    @apply inline-flex items-center justify-center px-2.5 py-0.5 text-xs font-medium rounded-full transition-colors duration-200 whitespace-nowrap;
  }
  
  /* Responsive styles for tags on small screens */
  @media (max-width: 640px) {
    .tag-base {
      padding-left: 0.375rem; /* px-1.5 */
      padding-right: 0.375rem; /* px-1.5 */
      font-size: 0.75rem; /* text-xs */
    }
  }

  /* 检查项类型标签: 用于标识检查项目的类别 */
  .tag-check-type {
    @apply tag-base bg-secondary text-secondary-foreground hover:bg-secondary/80;
  }

  /* 问题类型标签: 用于标识问题的类别 */
  .tag-issue-type {
    @apply tag-base bg-muted text-muted-foreground hover:bg-muted/80;
  }

  /* --- 严重程度标签 --- */
  /* 严重等级标签 */
  .tag-severity-critical {
    @apply tag-base;
    background-color: hsl(var(--tag-critical-bg));
    color: hsl(var(--tag-critical-text));
  }
  
  /* 高危等级标签 */
  .tag-severity-high {
    @apply tag-base;
    background-color: hsl(var(--tag-high-bg));
    color: hsl(var(--tag-high-text));
  }
  
  /* 中危等级标签 */
  .tag-severity-medium {
    @apply tag-base;
    background-color: hsl(var(--tag-medium-bg));
    color: hsl(var(--tag-medium-text));
  }
  
  /* 低危等级标签 */
  .tag-severity-low {
    @apply tag-base;
    background-color: hsl(var(--tag-low-bg));
    color: hsl(var(--tag-low-text));
  }

  /* --- 状态标签 --- */
  /* “激活”状态标签 */
  .tag-status-active {
    @apply tag-base;
    background-color: hsl(var(--tag-active-bg));
    color: hsl(var(--tag-active-text));
  }
  
  /* “待定”状态标签 */
  .tag-status-pending {
    @apply tag-base;
    background-color: hsl(var(--tag-pending-bg));
    color: hsl(var(--tag-pending-text));
  }
  
  /* “已解决”状态标签 */
  .tag-status-resolved {
    @apply tag-base;
    background-color: hsl(var(--tag-resolved-bg));
    color: hsl(var(--tag-resolved-text));
  }

  /* ---- Progress (Indeterminate) Animation ---- */
  @keyframes progress-indeterminate {
    0% {
      left: -40%;
      width: 40%;
    }
    50% {
      left: 20%;
      width: 60%;
    }
    100% {
      left: 100%;
      width: 40%;
    }
  }

  /* 进度条基础样式，采用zinc/slate中性色，与系统风格一致 */
  .progress-track {
    @apply relative w-full overflow-hidden rounded-md bg-zinc-200 dark:bg-slate-800;
  }

  .progress-fill {
    @apply h-full bg-[hsl(225,73%,35%)] dark:bg-[hsl(225,60%,25%)] transition-[width] duration-300 ease-out;
  }

  .progress-indeterminate-bar {
    @apply absolute inset-y-0 bg-[hsl(225,73%,35%)] dark:bg-[hsl(225,60%,25%)];
    animation: progress-indeterminate 1.2s ease-in-out infinite;
  }
}